import React, { useContext } from 'react';
import Backdrop from '@/components/UI/Backdrop/Backdrop'
import classes from './CartDetails.module.css'
import CartContext from '@/store/cartContext';
import Meal from '@/components/Meals/Meal/Meal'

const CartDetails = () => {
  const ctx = useContext(CartContext)
  return (
    <Backdrop>
      <div className={classes.CartDetails}
        onClick={e => e.stopPropagation()}>
        <header className={classes.Header}>
          <h2 className={classes.Title}>餐品详情</h2>
          <div className={classes.Clear}>
            <span>清空购物车</span>
          </div>
        </header>

        <div className={classes.MealList}>
          {
            ctx.items.map(item =>
              <Meal noDesc key={item.id} meal={item} />
            )
          }
        </div>
      </div>
    </Backdrop>
  );
};

export default CartDetails;